<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CCRM扫描出库-查询</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
            list-style: none;
        }

        html, body {
            height:100%;
            font-size: 100%;
        }

        .content {
            margin: 0 auto;
            height: 100%;
            width: 95%;
            color: #8d8d8d;
            padding: 1rem 0 1rem 0;
            box-sizing: border-box;
        }

        .content-one {
            margin: 0 auto;
            margin-bottom: 3.5rem;
            padding: 1.5rem 0.6rem 1rem;
            background-color: #e6e6e6;
            border-radius: 5px;
        }

        .startime {
            width: 100%;
            box-sizing: border-box;
            display: inline;
            height: 3rem;
            margin: 0.6rem 0;
            border: 0.1rem solid #ccc;
            border-radius: 0.2rem;
            background-color: #f5f5f5;
            padding-left: 0.6rem;
            font-size: 1em;
        }

        .startime-date {
            padding-right: 2em;
            background: url(${gPath}/styles/dingtalk/image/dete.png) #f5f5f5 no-repeat 98% center;
            background-size: 20px;
        }

        .sousuo {
            width: 100%;
            color: #fff;
            height: 3rem;
            line-height: 3rem;
            background-color: #0089f1;
            font-size: 1rem;
            box-sizing: border-box;
            border: 0;
        }

        .sn img {
            vertical-align: middle;
            padding-right: 1rem;
            width: 30px;
        }

        .sn span {
            vertical-align: middle;
            color: #666;
        }

        .line {
            margin-left: 12px;
            border-left: 0.3rem solid #0089f1;
            padding: 1rem 0 3.2rem 1.5rem;
        }

        .no-line{
            border-left: 0.3rem solid rgba(255, 255, 255, 0);
        }

        .one {
            color: #000;
            border-radius: 0.2rem;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }

        .number {
            position: relative;
            color: #fff;
            padding: 0 0.5rem;
            background-color: #0089f1;
            height: 3.5rem;
            font-size: 1rem;
            line-height: 3.5rem;
        }

        .one .up, .one .down{
            position: absolute;
            right: 3rem;
            text-decoration: none;
            color: #fff;
            width: 0.6rem;
            height: 0.6rem;
            top: 1.5rem;
            right: 0.8rem;
            border-left: 3px solid #fff;
            border-top: 3px solid #fff;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }

        .one .down{
            top:1.1rem;
            border: 0;
            border-right: 3px solid #fff;
            border-bottom: 3px solid #fff;
        }

        .message {
            padding: 0.7rem;
        }

        .contorler {
            padding-top: 1.7rem;
        }

        .beizhu {
            padding-bottom: 2rem;
        }

        .number-content-hide{
            display: none;
        }
    </style>
    <%@ include file="jsapi-header.jsp"%>
    <script type="text/javascript">
        dd.ready(function() {
            dd.biz.navigation.setRight({show: false});
        });

        $(function(){
            $(window).scroll(function() {
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    if (lastParams){
                        if (lastParams.pageIndex + 1 < lastParams.totalPage){
                            lastParams.pageIndex = lastParams.pageIndex + 1;
                            loadData(lastParams);
                        } else {
                            dd.device.notification.toast({text: "没有更多的记录"});
                        }
                    }
                }
            });
        });

        function toggle(ele){
            var ele = $(ele);
            ele.attr("class", ele.hasClass("up") ? "down" : "up");
            ele.parent("p").next("div").slideToggle();
        }

        function selectTime(obj){
            dd.biz.util.datetimepicker({
                format: 'yyyy-MM-dd HH:mm:ss',
                onSuccess : function(result) {
                    obj.value = result.value;
                }
            })
        }

        function wrapParam(params){
            var result = {};
            for (var i in params){
                result[params[i].name] = params[i].value;
            }
            return result;
        }

        function reset(){
            lastParams = null;
            $("#searchForm").reset();
        }

        function search(){
            $("#dataDiv").find(".content-two").remove();
            var params = wrapParam($("#searchForm").serializeArray());
            loadData(params);
        }

        var lastParams = null;
        const DEFAULT_PAGER = {
            pageIndex : 0,
            limit : 10,
            totalPage : 1,
            totalRow : 0
        };

        function loadData(param){
            dd.device.notification.showPreloader({text: "使劲加载中..", showIcon: true});
            param = param ? param : {};
            if (!param.pageIndex)
                param.pageIndex = DEFAULT_PAGER.pageIndex;
            if (!param.limit)
                param.limit = DEFAULT_PAGER.limit;
            lastParams = param;
            $.getJSON("${gPath}/clmp/dingtalk/mobility/productOutput", param, function(result){
                var datas = result.rows;
                lastParams.totalPage = result.totalPage;
                var dataDiv = $("#dataDiv");
                for (var i in datas){
                    var data = datas[i];
                    var html = '<div class="content-two"><div class="sn"><img src="${gPath}/styles/dingtalk/image/TIME.png" /><span>'+ data.output_time +'</span>'
                             + '</div><div class="line"><div class="one"><p class="number">快递单号 ：'+ data.express_num +'<span class="up" onclick="toggle(this)">'
                             + '</span></p><div class="number-content"><p class="message contorler">操作人员 ：'+ data.operator_name +'</p>';
                    var products = data.products;
                    if (products){
                        for (var i in products){
                            html += '<p class="message">SN：'+ products[i].sn +'</p>';
                        }
                    }
                    html += '<p class="message beizhu">备注：'+ (data.remark ? data.remark : '') +'</p></div></div></div></div>';
                    dataDiv.append(html);
                }
                dd.device.notification.hidePreloader();
            });
        }
    </script>
</head>
<body>
    <div id="dataDiv" class="content">
        <div class="content-one">
            <form id="searchForm">
                <p>出库时间：</p>
                <input type="text" name="start" readonly onclick="selectTime(this)" placeholder="起始时间"  class="startime startime-date"/>
                <br>
                <input type="text" name="end" readonly onclick="selectTime(this)" placeholder="结束时间" class="startime startime-date"/>
                <p>快递单号：</p>
                <input type="text" name="express_num" class="startime" />
                <p>SN：</p>
                <input type="text" name="sn" class="startime" />
                <input type="button" value="搜索" onclick="search()" class="startime sousuo"/>
                <input type="button" value="重置" onclick="reset()" class="startime sousuo"/>
            </form>
        </div>
    </div>
</body>
</html>